<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#t{position: absolute;top:100px;right:100px;background:red;width:200px;height:500px;}
			a{position: absolute;top:10px;left: 10px;background:#008000;height:50px;width:50px;}
			#te{display:none;position: absolute;top:100px;right:305px;background:#4682B4;width:200px;height:200px;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var ot=document.getElementById('t');
//				var ot=document.querySelector('#t')
				var ote=document.getElementById('te');
			var oA=document.getElementsByTagName('a')[0];
//				var oA=document.querySelector('#t a');
				var tims=null
//				function(){	
//					clearTimeout(tims)
//					ote.style.display='block';
//				}
//				function(){
//					tims=setTimeout(function(){
//						ote.style.display='none';
//					},330)
//		
//				}
				oA.onmouseover=ote.onmouseover=function(){				
					clearTimeout(tims);
					ote.style.display='block';
				}
				oA.onmouseout=ote.onmouseout=function(){
					tims=setTimeout(function(){
						ote.style.display='none';
					},300)
		
				}
				
				
				
				
				
				
			}
		</script>
	</head>
	<body>
		<div id="t">
			<a href="javascript:;"></a>	
		</div>
		<div id="te">
			
		</div>
	</body>
</html>
